<template>
	<view class="nft_detail_wrap">
		<view class="header">
			<view class="left">
				<uni-icons color="black" size="28" type="left" @click="back" />
			</view>
		</view>
		<image class="nft_image" src="http://qiniu.relaverse.cn/icon/nft_placeholder.png" mode="widthFix"></image>

		<view class="nft_main">
			<view class="nft_col_name">范德萨发斯蒂芬</view>
			<view class="nft_tags">
				<view class="nft_tag"> 发行50000个 </view>
				<view class="nft_tag"> 流通50000个 </view>
				<!-- <view class="nft_tag"> 成交50000个 </view> -->
			</view>
		</view>

		<view class="long_tip">
			<text class="label">合约地址</text>
			<text class="value">000000000000000000000000</text>
		</view>
		<view class="long_tip">
			<text class="label">链上标识</text>
			<text class="value">123456</text>
		</view>

		<view class="tabs">
			<view class="tabs_main">
				<view class="tabs_item" v-for="(item, index) in tabs" :key="index" @click="tab = item.id">
					<view class="title" :class="{ active: item.id === tab }">{{ item.name }}</view>
					<view class="line" :class="{ active: item.id === tab }"></view>
				</view>
			</view>
		</view>

		<view class="tabsItems">
			<view v-show="tab === 1" class="nft_info">
				<u-collapse :key="collKeys" :value="collapse" :border="false" @change="collapseChange">
					<u-collapse-item name="owner" :expandedDirection="['right', 'down']" :clickable="false" :border="false">
						<view slot="title" class="collapse_title">
							<text>持有人信息</text>
						</view>
						<view class="collapse_info">
							<text>持有人</text>
							<view class="user">
								<image class="user_image" src="http://qiniu.relaverse.cn/icon/nft_placeholder.png" mode="widthFix"></image>
								<view class="ta_home">
									Ta的主页
									<uni-icons color="white" size="12" type="right" />
								</view>
							</view>
						</view>
					</u-collapse-item>

					<u-collapse-item name="publish" :expandedDirection="['right', 'down']" :clickable="false" :border="false">
						<view slot="title" class="collapse_title">
							<text>藏品发行信息</text>
						</view>
						<view class="collapse_info">
							<text>发行方</text>
							<text>轻松小镇</text>
						</view>
						<view class="collapse_info">
							<text>版权方</text>
							<text>李时珍艺术俱乐部</text>
						</view>
						<view class="collapse_info">
							<text>战略合作</text>
							<text>倍轻松有限公司</text>
						</view>
					</u-collapse-item>

					<u-collapse-item name="chain" :expandedDirection="['right', 'down']" :clickable="false" :border="false">
						<view slot="title" class="collapse_title">
							<text>藏品链上信息</text>
						</view>
						<view class="collapse_info">
							<text>区块链信息</text>
							<text>超块链提供技术支持</text>
						</view>
						<view class="collapse_info">
							<text>藏品链上ID</text>
							<text>999999</text>
						</view>
						<view class="collapse_info">
							<text>交易哈希</text>
							<text>000000000000000000000</text>
						</view>
					</u-collapse-item>

					<u-collapse-item name="description" :expandedDirection="['right', 'down']" :clickable="false" :border="false">
						<view slot="title" class="collapse_title">
							<text>藏品简介</text>
						</view>
						<view class="collapse_info">
							<text>
								描述文案描述文案描述文案描述文案描述文案描述文案描述文案描述文案描述文案描述文案描述文案描述文案描述文案描述文案描述文案描述文案描述文案描述文案描述文案。
							</text>
						</view>
					</u-collapse-item>
				</u-collapse>

				<view style="height: 20rpx"></view>
			</view>
			<view v-show="tab === 2" class="consign_info">
				<view class="cs_item" v-for="(item, index) in consignments" :key="index">
					<view class="row">
						<text class="name">{{ item.name }}</text>
						<text class="schedule" :style="{ color: scheduleColor(item.scheduleType) }">{{ scheduleDesc(item.scheduleType) }}</text>
					</view>
					<view class="row">
						<text class="time">{{ item.createTime }}</text>
						<text class="price">{{ price(item.price, item.currencyType) }}</text>
					</view>
				</view>

				<view class="no_more">-- 没有更多 --</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			tabs: [
				{
					name: "藏品信息",
					id: 1,
				},
				{
					name: "寄售信息",
					id: 2,
				},
			],
			tab: 1,

			consignments: [
				{
					name: "用户名称",
					createTime: "2025-02-30 11:25:00",
					currencyType: 1, // 交易货币类型 1rmb 2元气
					scheduleType: 1, // 1寄售 2取消寄售 3买入
					price: "99999",
				},

				{
					name: "用户名称",
					createTime: "2025-02-30 11:25:00",
					currencyType: 2, // 交易货币类型 1rmb 2元气
					scheduleType: 2, // 1寄售 2取消寄售 3买入
					price: "65488",
				},

				{
					name: "用户名称",
					createTime: "2025-02-30 11:25:00",
					currencyType: 1, // 交易货币类型 1rmb 2元气
					scheduleType: 3, // 1寄售 2取消寄售 3买入
					price: "852147",
				},
			],

			collapse: [],
			collKeys: 0,
		};
	},

	computed: {
		scheduleDesc() {
			return (type) => ["", "寄售", "取消寄售", "买入"][type];
		},

		scheduleColor() {
			return (type) => ["", "#1952F8", "#999999", "#FF5A5A"][type];
		},

		price() {
			return (price, type) => (type === 1 ? `￥${price}` : `${price}元气`);
		},
	},

	mounted() {
		this.$nextTick(() => {
			this.collapse = ["owner", "publish", "chain", "description"];
			this.collKeys++;
		});
	},

	methods: {
		back() {
			uni.navigateBack();
		},

		collapseChange(event) {
			this.collapse = event
				.map((item) => {
					return item.status === "open" ? item.name : undefined;
				})
				.filter((item) => item);
		},
	},
};
</script>
<style lang="scss" scoped>
.nft_detail_wrap {
	width: 100%;
	height: max-content;
	position: relative;

	.header {
		position: absolute;
		left: 0;
		top: 120rpx;
		z-index: 5;
		width: 100%;
		height: 70rpx;
		padding: 0 40rpx;

		display: flex;
		justify-content: space-between;
		align-content: center;

		.left {
			width: 70rpx;
			height: 70rpx;
			background-color: rgba($color: #ffffff, $alpha: 0.2);
			line-height: 70rpx;
			text-align: center;
			border-radius: 70rpx;
		}
	}

	.nft_image {
		width: 100%;
		background-color: black;
	}

	.nft_main {
		width: 100%;
		height: max-content;
		// flex: 1;
		color: white;
		padding: 40rpx;
		overflow: hidden;
		background-color: black;

		.nft_col_name {
			width: 100%;
			font-weight: 500;
			font-size: 44rpx;
		}

		.nft_tags {
			width: 100%;
			height: 48rpx;

			margin-top: 20rpx;

			display: flex;
			justify-content: flex-start;
			align-items: center;

			.nft_tag {
				width: 168rpx;
				height: 100%;
				background: linear-gradient(270deg, #fefbec 0%, #e5cc96 100%);
				border-radius: 8rpx;

				font-weight: bold;
				font-size: 24rpx;
				line-height: 48rpx;
				text-align: center;

				color: black;

				margin-right: 20rpx;
			}
		}
	}

	.long_tip {
		width: calc(100% - 80rpx);
		height: 72rpx;
		line-height: 72rpx;
		padding: 0 30rpx;
		background-color: rgba($color: #668dff, $alpha: 0.2);
		font-weight: 500;
		color: #668dff;
		font-size: 32rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: space-between;
		align-content: center;

		margin: 0 auto;
		margin-bottom: 12rpx;
	}

	.tabs {
		width: 100%;
		height: 88rpx;
		margin-top: 20rpx;

		.tabs_main {
			width: 60%;
			height: 100%;
			margin: 0 auto;
			margin-top: 40rpx;

			display: flex;
			justify-content: space-between;
			align-content: flex-end;

			.tabs_item {
				height: 66rpx;
				width: 144rpx;

				color: #999999;

				margin: auto;

				display: flex;
				justify-content: flex-end;
				align-items: center;
				flex-direction: column;

				.title {
					font-weight: 500;
					font-size: 36rpx;
					text-align: center;

					&.active {
						color: white;
					}
				}

				.line {
					width: 90rpx;
					height: 8rpx;
					background-color: black;
					border-radius: 4rpx;
					margin-top: 4rpx;

					&.active {
						background-color: #2359f8;
					}
				}
			}
		}
	}

	.tabsItems {
		width: 100%;
		height: max-content;
		padding: 0 40rpx;
		margin-top: 40rpx;

		.nft_info {
			width: 100%;

			::v-deep .u-collapse-item {
				margin-bottom: 20rpx;
			}

			::v-deep .u-cell {
				background-color: #1b1b1b;
				border-width: 1px solid #2e2e2e;
			}

			// ::v-deep .u-collapse-item__content {
			// 	height: max-content !important;
			// }

			.collapse_title {
				color: white;
				font-size: 32rpx;
				font-weight: bold;
				line-height: 152prx;
			}

			.collapse_info {
				display: flex;
				justify-content: space-between;
				align-content: center;

				& + .collapse_info {
					margin-top: 20rpx;
				}

				// &:last-child {
				// 	margin-bottom: 40rpx;
				// }

				text {
					font-weight: bold;
					color: #999999;
				}

				.user {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.user_image {
						width: 36rpx;
						border-radius: 36rpx;
					}

					.ta_home {
						margin-left: 8rpx;
						color: white;
						font-weight: bold;
						font-size: 24rpx;
					}
				}
			}
		}

		.consign_info {
			width: 100%;
			height: max-content;

			.no_more {
				width: 100%;
				height: 50rpx;
				text-align: center;
				line-height: 50rpx;
				font-size: 24rpx;
				color: #999999;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
			}

			.cs_item {
				width: 100%;
				height: 140rpx;
				padding: 28rpx;
				border-radius: 30rpx;
				background-color: #1b1b1b;
				margin-bottom: 20rpx;

				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;

				.row {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.name {
					color: white;
					font-weight: bold;
					font-size: 32rpx;
				}
				.schedule {
					font-weight: bold;
					font-size: 32rpx;
				}
				.time {
					font-weight: bold;
					font-size: 24rpx;
					color: #666666;
				}
				.price {
					color: white;
					font-weight: bold;
					font-size: 28rpx;
				}
			}
		}
	}
}
</style>
